<template>
  <div style="width: 40px">
    <a-drawer
      width="500px"
      class="ZZGF-font-bold"
      :visible="visible"
      @close="onClose"
      absolute
      placement="left"
      temporary
    >
      <v-list style="background-color: white">
        <v-list-item>
          <v-list-item-title class="text-h6" style="font-family: '华文楷体',sans-serif">
            {{ recordTitle }}
          </v-list-item-title>

          <v-list-item-action>
            <v-icon style="font-size: 20px">mdi-notebook-edit-outline</v-icon>
          </v-list-item-action>
        </v-list-item>
      </v-list>
      <v-divider></v-divider>
      <v-list-group
        v-for="item in items"
        v-if="item.items.length !== 0"
        :key="item.title"
        v-model="item.active"
        :prepend-icon="item.action"
        no-action
      >
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span style="white-space: normal; word-wrap: break-word;">
                   {{ item.title }}
                </span>
            </v-list-item-title>
          </v-list-item-content>
        </template>
        <v-list-item
          v-for="child in item.items"
          :key="child.title"
        >
          <v-list-item-content>
            <v-list-item-title>
              &emsp;&emsp;&emsp;
              <span style="white-space: normal; word-wrap: break-word;">
                   {{ child.title }}
                </span>
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-group>
      <v-list-group prepend-icon="mdi-map-check-outline" v-if="info.items.length !== 0">
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <span style="white-space: normal; word-wrap: break-word;">
                   {{ info.title }}
                </span>
            </v-list-item-title>
          </v-list-item-content>
        </template>

        <v-list-group
          sub-group
          v-for="(item, i) in info.items"
          :key="i"
        >
          <template v-slot:activator>
            <v-list-item-content>
              <v-list-item-title>
                <span style="white-space: normal; word-wrap: break-word;">
                   {{ item.title }}
                </span>
                 </v-list-item-title>
            </v-list-item-content>
            <v-list-item-icon>
              <v-icon>mdi-message-arrow-left-outline</v-icon>
            </v-list-item-icon>
          </template>

          <v-list-item
            v-for="(text, i) in item.items"
            :key="i"
            link
          >
            <v-list-item-title>
                <span style="white-space: normal; word-wrap: break-word;">
                   {{ text }}
                </span>
            </v-list-item-title>
          </v-list-item>
        </v-list-group>

      </v-list-group>

    </a-drawer>
    <a-affix :offset-top="100">
      <v-btn
        elevation="8"
        tile
        class="white--text"
        x-small
        height="22vh"
        width="2vw"
        @click="showDrawer"
        color="main_1"
        style="font-size: 15px; color: #FFFAF4; font-family: '华文楷体',sans-serif; margin-top: 8vw"
      >
          <span class="onecn">
            创新引导书签
            <v-icon style="font-size: 18px; font-weight: lighter; margin-right: 5px">
            mdi-notebook-edit-outline
          </v-icon>
          </span>

      </v-btn>
    </a-affix>
  </div>
</template>
<script>
  import request from "../utils/request";

  export default {
    created() {
      this.loadRecord()
      this.loadLinks()
    },
    activated() {
      this.loadRecord()
      this.loadLinks()
    },
    mounted() {

    },
    data() {
      return {
        visible: false,
        guideInfo: {},
        recordTitle: '',
        selectedItem: 0,
        info: {
          items: [],
          title: '解决途径及相关冲突信息笔记',
        },
        items: [
          {
            action: 'mdi-ticket',
            active: true,
            items: [],
            title: '创新引导基本信息',
          },
          {
            action: 'mdi-lightbulb-question-outline',
            items: [],
            title: '问题引导笔记',
          },
          {
            action: 'mdi-graphql',
            items: [],
            title: '功能模型图关键连接关系',
          },
        ],
      }
    },
    methods: {
      showDrawer() {
        this.loadRecord()
        this.loadLinks()
        this.visible = true
      },
      onClose() {
        this.visible = false;
      },
      loadData(data){
        this.recordTitle = data.name + '——创新引导书签'
        this.guideInfo = data
        this.$store.state.maxStep = data.process

        this.$set(this.items[0], "items", [
          {title: '引导名称：' + data.name},
          {title: '创建时间：' + data.createTime},
          {title: '已完成步骤：' + data.process},
        ])
        if (data.q1 !== null){
          this.$set(this.items[1], "items", [
            {title: '领域：' + data.q1,},
            {title: '预算：' + data.q2},
            {title: '专利申请希望：' + data.q3},
            {title: '完成时间：' + data.q4},
            {title: '问题严重程度：' + data.q5},
            {title: '问题不改善的后果：' + data.q6},
            {title: '问题改善后对他人影响：' + data.q7},
            {title: '改善问题的原因：' + data.q8},
            {title: '是否进行过独立思考和分析：' + data.q9},
            {title: '是否有成熟的解决方案：' + data.q10},
          ])
        }
        let results = []
        let tmpDirection = JSON.parse(data.direction)
        if (data.direction !== null){
          for (let i = 0; i < tmpDirection.length; i++){
            let tmp = {
              title: '特性' + tmpDirection[i].id + '的冲突信息和解决途径',
              items: []
            }
            if(tmpDirection[i].clashMessage !== '')
              tmp.items.push(tmpDirection[i].clashMessage)
            tmp.items.push(...tmpDirection[i].suggestion)
            results.push(tmp)
          }
          this.$set(this.info, "items", results)
        }
      },
      parseJSONCapture(str) {
        try {return JSON.parse(str);}
        catch (e) {
          this.confirm()
        }
      },
      decodeCapture(str) {
        try {return decodeURIComponent(window.atob(str))}
        catch (e) {
          this.confirm()
        }
      },
      confirm(){
        if (sessionStorage.getItem('guideId'))
          sessionStorage.removeItem('guideId')
        if (sessionStorage.getItem('graph'))
          sessionStorage.removeItem('graph')
        if (sessionStorage.getItem('selectableNodes'))
          sessionStorage.removeItem('selectableNodes')
        this.$router.push('/personal/guide')
      },

      loadRecord(){
        request.get('/guide/isMine', {params: {id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))}}).then(res1 => {
          if (res1.code === '200'){
            let id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))
            request.get("/guide/" + id).then(res => {
              if (res.code === '200') {
                this.loadData(res.data)
              }
            })
          }
          else this.confirm()
        })
      },
      loadLinks(){
        request.get('/guide/isMine', {params: {id: this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))}}).then(res1 => {
          if (res1.code === '200'){
            let id = this.parseJSONCapture(this.decodeCapture(sessionStorage.getItem('guideId')))
            request.get("/guide/getModelLinks", {
              params:{
                id: parseInt(id)
              }
            }).then(res => {
              if (res.code === '200') {
                let arr = []
                for (let i = 0; i < res.data.length; i++){
                  arr.push({title: res.data[i]})
                }
                this.$set(this.items[2], 'items', arr)
              }
            })
          }
          else this.confirm()
        })

      }
    },
  };
</script>

<style scoped>
  .row{
    margin: -28px;
  }
  .onecn{
    writing-mode: tb-rl;
    font-weight: bolder;
  }
  .v-list-item{
    min-height: 60px !important;
    border-radius: 14px !important;
  }


</style>
